<template>
  <div class="dashboard-container">
    <el-button type="primary" icon="el-icon-plus" @click="$router.push('new')">新增试题</el-button>
    <el-button type="primary" icon="el-icon-upload" @click="dialogFormVisible = true">批量导入</el-button>
    <!-- 下拉菜单 -->
    <div class="ss">
      <questionSelect v-model="form"></questionSelect>
      <el-col :span="5" style="margin-left:180px">
        <el-button @click="huntClick">清除</el-button>
        <el-button type="primary" @click="gainlist">搜索</el-button>
      </el-col>
    </div>
    <!-- /下拉菜单 -->
    <!-- 表格 -->
    <el-table
        border
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="50">
      </el-table-column>
      <el-table-column
        prop="number"
        label="试题编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="subjectID"
        label="学科"
        width="90">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="90">
      </el-table-column>
      <el-table-column
        prop="question"
        label="题干"
        width="120">
      </el-table-column>
      <el-table-column
        prop="addDate"
        label="录入时间"
        width="120">
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="80">
      </el-table-column>
      <el-table-column
        prop=""
        label="使用次数"
        width="80">
      </el-table-column>
      <el-table-column
        prop="creator"
        label="录入人"
        width="80">
      </el-table-column>
      <el-table-column
        label="操作"
       >
       <template slot-scope="scope">
         <el-button type="text" label="预览" size="small">
           <el-dropdown trigger="click" placement="bottom-start">
            <span class="el-dropdown-link">
              预览
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-plus" @click.native="clickDetails(scope.row)">
                单选
              </el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus">多选</el-dropdown-item>
              <el-dropdown-item icon="el-icon-circle-plus-outline">简答</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
         </el-button>
         <el-button type="text" size="small" @click="$router.push(`new/${scope.row.id}`)">修改</el-button>
         <el-button type="text" size="small" @click="clickDel(scope.row)">删除</el-button>
         <el-button type="text" size="small">加入精选</el-button>
       </template>
      </el-table-column>
    </el-table>
    <!-- /表格 -->
    <!-- 分页 -->
    <el-pagination
      class="foot"
      background
      layout="prev, pager, next"
      :total="length">
    </el-pagination>
    <!-- 题目预览 -->
    <el-dialog
      title="题目预览"
      class="xx"
      :visible.sync="dialogVisible"
      :before-close="handleClose">
      <span>
      <el-form ref="form" :model="arrTestQuestions">
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="题库:">
               面试宝典题库
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="学科:">
                {{arrTestQuestions.subjectID}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="9">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="题型:">
                {{arrTestQuestions.questionType	}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="编号:">
                {{arrTestQuestions.number}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="难度:">
                {{arrTestQuestions.difficulty}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="标签:">
                {{arrTestQuestions.tags}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="目录:">
                {{arrTestQuestions.catalogID}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="企业:">
                {{arrTestQuestions.enterpriseID}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="方向:">
                {{arrTestQuestions.direction}}
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div class="grid-content bg-purple">
              <el-form-item class="ff" label="城市:">
                {{arrTestQuestions.city}}
              </el-form-item>
            </div>
          </el-col>
        </el-row>
        <hr>
        <el-form-item class="ff" label="题干:">
          <br>
          <span style="color:rgb(64, 158, 255)">
            &nbsp;&nbsp;&nbsp;{{arrTestQuestions.question}}
          </span>
        </el-form-item>
        <el-form-item label="选择题">
          <el-radio  v-for="(item, index) in arrTestQuestions.options" :key="index" :value="radio" :label="item.isRight+''">{{arralphabet[index]}}:&nbsp;&nbsp;&nbsp;{{item.code}}</el-radio>
        </el-form-item>
        <hr>
        <el-form-item style="padding: 5px" label="参考答案:">
          <el-button type="danger">视频答案预览</el-button>
        </el-form-item>
        <hr>
        <el-form-item style="padding: 5px" label="答案解析:">
          {{arrTestQuestions.answerID}}
        </el-form-item>
        <hr>
        <el-form-item style="padding: 5px" label="题目备注:">
          <br>
          {{arrTestQuestions.remarks}}
        </el-form-item>
      </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 题目预览 -->

    <!-- 批量导入 -->
    <el-dialog title="批量导入" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="学科" :label-width="formLabelWidth">
          <el-select v-model="batchLead.subjectsID" @change="changeSub" placeholder="请选择学科">
            <el-option v-for="item in arrSub" :key="item.id" :label="item.subjectName" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上传文件" :label-width="formLabelWidth">
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :http-request="updata">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickUpdata">上 传</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 加载下拉菜单组件
import questionSelect from './../components/questions-select'
// 引入请求
import {list, detail, batch, remove} from '@/api/hmmm/questions'
import {list as lists} from '@/api/hmmm/subjects'
import {parseTime} from '@/utils/index'
export default {
  name: 'QuestionsList',
  components: {
    questionSelect
  },
  data() {
    return {
      form: {
        subjectsID: '', // 学科
        difficulty: '', // 难度
        questionType: '', // 题型
        direction: '', // 方向
        tagesID: '', // 标签
        Provinces: null, // 省
        city: '', // 市
        keyWord: '', // 关键字
        titleRemark: '', // 题目备注
        firmIntro: '', // 企业简介
        dataEntry: '' // 录入人
      },
      tableData: [], // 存放后端返回的数据列表
      length: 1,
      dialogVisible: false,
      arrTestQuestions: {},
      radio: '1',
      arralphabet: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G'
      ],
      formLabelWidth: '120px',
      dialogFormVisible: false, // 批量导入
      batchLead: {
        subjectsID: '',
        fileID: ''
      },
      arrSub: [] // 学科列表
    }
  },
  created () {
    this.gainlist()
  },
  watch: {
    dialogFormVisible: {
      handler () {
        if (this.dialogFormVisible) {
          this.gainSubject()
        }
      }
    }
  },
  methods: {
    // 获取基础题库列表
    async gainlist () {
      // console.log(1)
      const data = await list(this.form)
      data.data.items.forEach(item => {
        item.addDate = parseTime(item.addDate)
      })
      // console.log(data)
      this.tableData = data.data.items
      this.length = data.data.counts
    },
    // 点击搜索
    huntClick () {
      for (let key in this.form) {
        this.form[key] = ''
      }
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 点击单选按钮
    async clickDetails (item) {
      // console.log(item)
      this.dialogVisible = true
      const res = await detail(item)
      console.log(res.data)
      this.arrTestQuestions = res.data
    },
    // 上传文件
    updata (value) {
      // console.log(value)
      this.batchLead.fileID = value.file
    },
    // 学科列表
    async gainSubject () {
      try {
        const data = await lists()
        const res = await lists({ pagesize: data.data.counts })
        // console.log(res)
        this.arrSub = res.data.items
      } catch (error) {
        console.log(error)
      }
    },
    changeSub (id) {
      // console.log(id)
      this.batchLead.subjectsID = id
    },
    // 点击上传
    async clickUpdata () {
      try {
        this.dialogFormVisible = false
        const data = await batch(this.batchLead)
        // console.log(data)
        this.$message({
          message: '恭喜你，上传成功',
          type: 'success'
        })
      } catch (error) {
        console.log(error)
      }
      
    },
    // 点击删除
    async clickDel (item) {
      try {
        if (!window.confirm('真的要删除吗')) {
          return
        }
        const data = await remove(item)
        // console.log(data)
        this.$message({
          message: '恭喜你，删除成功',
          type: 'success'
        })
        this.gainlist()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style scoped>
.dashboard-container {
  padding: 10px;
}
.foot {
  margin-left: 50%;
  transform: translateX(-50%)
}
.ss {
  background: #fff;
  height: 300px;
  padding: 20px 0;
  margin: 20px 0;
}
.el-dropdown-link {
  color: rgb(64, 158, 255)
}
.ff {
  margin-bottom: 0px;
}
.el-radio {
  margin-top: 10px;
  display: block;
}
.el-form-item__content {
  color: rgb(64, 158, 255);
  margin: 100px!important;
}
</style>
